<template>
  <div class="Audit">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>审计管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 主体内容 -->
    <main>
      <div class="choice">
        <!-- <li>全部</li> -->
        <!-- 下拉筛选 -->
        <el-select v-model="filterType" placeholder="选择类型" @change="Change">
          <el-option
            v-for="(state, index) in statuses"
            :key="state"
            :label="state"
            :value="index"
          ></el-option>
        </el-select>
      </div>
      <div class="content">
        <div class="content-top">
          <select name="请选择省份" id="">
            <option value="请选择省份">请选择省份</option>
            <option value=""></option>
          </select>
          <select name="" id="">
            <option value="请选择城市">请选择城市</option>
            <option value=""></option>
          </select>
          <select name="" id="">
            <option value="请选择区县">请选择区县</option>
            <option value=""></option>
          </select>
          <!-- 搜索关键字@blur="Search" tableDataName-->
          <form action="">
            <el-input
              placeholder="请输入搜索关键字"
              icon="search"
              v-model="val"
              class="search-input"
            >
            </el-input>
            <el-button type="primary">搜索</el-button>
          </form>
        </div>
        <div class="text">
          <!-- 表格 filterData  tables-->
          <el-table :data="tables" border style="width: 100%">
            <el-table-column
              label="序号"
              type="index"
              width="60"
            ></el-table-column>
            <el-table-column label="小区名称" width="125">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.name }}</span>
              </template>
            </el-table-column>
            <el-table-column label="标题" width="125">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.title }}</span>
              </template>
            </el-table-column>
            <el-table-column label="面积" width="90">
              <template slot-scope="scope">
                <span style="margin-left: 10px"
                  >{{ scope.row.acreage }}m<sup>2</sup></span
                >
              </template>
            </el-table-column>
            <el-table-column label="总价" width="70">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.price }}万</span>
              </template>
            </el-table-column>
            <el-table-column label="排序" width="50">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.sorts }}</span>
              </template>
            </el-table-column>
            <el-table-column label="状态" width="80">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.state }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope" width="300">
                <el-button size="mini" type="warning" icon="el-icon-edit"
                  >审核</el-button
                >
                <el-button
                  size="mini"
                  type="primary"
                  icon="el-icon-edit"
                  @click="handleEdit(scope.$index, scope.row)"
                  >编辑</el-button
                >
                <el-button
                  size="mini"
                  type="danger"
                  icon="el-icon-delete"
                  @click="handleDelete(scope.$index, scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <!-- 弹窗 -->
          <el-dialog title="编辑" :visible.sync="dialogFormVisible">
            <el-form :model="form">
              <el-form-item label="小区名称" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="标题" :label-width="formLabelWidth">
                <el-input v-model="form.title" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="面积" :label-width="formLabelWidth">
                <el-input v-model="form.acreage" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="总价" :label-width="formLabelWidth">
                <el-input v-model="form.price" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="排序" :label-width="formLabelWidth">
                <el-input v-model="form.sorts" autocomplete="off"></el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="submit">确 定</el-button>
            </div>
          </el-dialog>
        </div>
        <!-- 分页 -->
        <div class="block">
          <el-pagination
            background
            @current-change="handleCurrentChange"
            :current-page="pageIndex"
            :page-size="pageSize"
            layout="total, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      pageIndex: 1,
      pageSize: 5,
      bool: false,
      ind: 0,
      total: 0,
      val: "",
      tableDataName: "",
      filterType: "",
      // filterData:[],
      statuses: ["待审核", "已审核"],
      form: {
        name: "",
        title: "",
        acreage: "",
        price: "",
        sorts: "",
      },
      dialogFormVisible: false,
      formLabelWidth: "120px",
    }
  },
  created() {
    this.$api.getAudit().then((res) => {
      console.log(res, "shenji");
      this.tableData = res.data.data.data;
      /// 默认首次加载
      this.handleCurrentChange();
      /// 总条数
      this.total = res.data.data.total;
    })
  },
  computed: {
    // 实时监听表格
    tables: function () {
      const val = this.val;
      if (val) {
        return this.tableData.filter((dataNews) => {
          return Object.keys(dataNews).some((key) => {
            return String(dataNews[key]).toLowerCase().indexOf(val) > -1;
          })
        })
      }
      return this.tableData;
    }
  },
  methods: {
    // Search(e) {
    //   let title = e.target.value;
    //   this.$api.searchAudit(title).then((res) => {
    //     console.log(this.tableData, "e");
    //     this.tableData = res.data
    //   })
    // },
    /// 判断审核状态
    Change() {
      console.log(this.filterType);
      if (this.filterType === 0) {
        // 待审核
        this.$api.switchAudit({ type: "待审核" }).then((res) => {
          console.log(res.data);
          this.tableData = res.data.data;
          this.total = this.tableData.length;
          this.handleCurrentChange();
        })
      } else {
        // 已审核
        this.$api.switchAudit({ type: "已审核" }).then((res) => {
          this.tableData = res.data.data;
          this.handleCurrentChange()
          this.total = this.tableData.length;
        });
      }
    },
    submit() {
      this.dialogFormVisible = false;
      this.$api
        .editAudit({
          id: this.form.id,
          name: this.form.name,
          title: this.form.title,
          acreage: this.form.acreage,
          price: this.form.price,
          sorts: this.form.sorts,
        })
        .then((res) => {
          console.log(res, "edit");
          this.$message.success("编辑成功");
          this.$api.getAudit().then((res) => {
            this.tableData = res.data.data.data;
          });
          this.handleCurrentChange();
        });
    },
    /// 编辑
    handleEdit(index, row) {
      console.log(index, row);
      this.dialogFormVisible = true;
      this.form.id = row.id;
      this.form.name = row.name;
      this.form.title = row.title;
      this.form.acreage = row.acreage;
      this.form.price = row.price;
      this.form.sorts = row.sorts;
    },
    /// 删除表格数据
    handleDelete(index, row) {
      console.log(index, row);
      this.$api.delAudit(row.id).then((res) => {
        console.log(res, "res");
        this.$message.success(res.data.message);
        this.$api.getAudit().then((res) => {
          this.tableData = res.data.data.data;
        });
        this.handleCurrentChange();
      });
    },
    /// 分页
    handleCurrentChange(e = 1, ind = this.ind) {
      this.pageIndex = e;
      this.bool = true;
      this.$api
        .getAudit({
          pageIndex: this.pageIndex,
          pageSize: this.pageSize,
          keyword: this.keyword,
        })
        .then((res) => {
          if (this.ind !== ind) return;
          if (res.data.code === 1) {
            this.tableData = res.data.data.data;
          }
          this.bool = false;
        });
    },
    /// 搜索
    doFilter() {
      if (this.tableDataName == "") {
        this.$message.warning("查询条件不能为空！");
        return;
      }
      // this.tables = [];
      // (this.filterTable = []),
      //   this.tableData.forEach((value) => {
      //     if (value.title) {
      //       if (value.title.indexOf(this.tableDataName) >= 0) {
      //         this.filterTable.push(value);
      //       }
      //     }
      // })
    },
  },
};
</script>

<style lang='scss' scoped>
.Audit {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .el-breadcrumb {
    width: 100%;
    height: 30px;
    line-height: 30px;
  }
}
main {
  flex: 1;
  overflow-y: scroll;
  .choice {
    width: 100%;
    height: 50px;
    line-height: 50px;
    display: flex;
  }
  .content {
    width: 100%;
    height: auto;
  }
}
.content-top {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  select {
    width: 120px;
    height: 30px;
  }
  .search-input {
    width: 150px;
    height: 30px;
  }
}
</style>